<template>
    <!-- 功能卡片 -->
    <view class="card-container">
        <text class="title">{{ title }}</text>
        <view class="item-list">
            <view class="item" v-for="(item, index) in itemList" :key="index" @tap="goDetail(item)">
                <text :class="`iconfont ${item.icon}`"></text>
                <text class="item-title">{{ item.title }}</text>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { checkUserLogin } from '@/utils/hook';

import { onLoad } from '@dcloudio/uni-app';
const props = defineProps({
    title: {
        type: String,
        default: "我的发现"
    },
    itemList: {
        //todo
        type: Array<any>,
        default: []
    }
});

const goDetail = (item: any) => {
    checkUserLogin(() => {
        uni.navigateTo({ url: item.url });
    })
}
</script>
<style scoped lang="scss">
.card-container {
    display: flex;
    flex-direction: column;
    margin: 30rpx;
    padding: 30rpx;
    border-radius: 15rpx;
    background-color: #fff;
    box-shadow: $shadow;

    .title {
        margin-bottom: 20rpx;
        color: $color-title;
        font-weight: 800;
    }

    .item-list {
        display: flex;

        justify-content: space-around;

        .item {
            display: flex;
            flex-direction: column;
            align-items: center;

            .iconfont {
                font-size: 50rpx;
                color: $color-main;
                font-weight: 300;
            }

            &-title {
                margin-top: 15rpx;
                font-size: 24rpx;
            }
        }
    }
}
</style>
